<link rel="stylesheet" href="<?php echo $this->shopHelper()->baseCssPath('template/pc/green/css/stylesheet.css'); ?>?v=<?php echo time(); ?>">
<script type="text/javascript" src="<?php echo $this->shopHelper()->baseCssPath('template/pc/green/js/frontJs.js'); ?>"></script>
<script type="text/javascript" src="<?php echo $this->shopHelper()->baseJsPath('template/pc/green/js/layer/layer.js'); ?>"></script>
<script type="text/javascript" src="<?php echo $this->shopHelper()->baseCssPath('template/pc/green/js/headCommon.js'); ?>?v=<?php echo time(); ?>"></script>
<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=<?php echo $mapConfig['map_key']; ?>"></script>
<style>
    #map-container {
        overflow: hidden;
        width: 100%;
        height: 80%;
        margin: 0;
        font-family: "微软雅黑";
    }
</style>
<body>
<div>
    <div class="xm-plain-box">
        <div class="box-bd">
            <div class="row">
                <form method="post" name="user-address-map-form" id="user-address-map-form" class="form-horizontal">
                    <div class="control-group">
                        <div style="margin-bottom: 10px;">
                            <input type="text" name="searchArea" id="searchArea" class="form-control" placeholder="<?php echo $this->translate('输入需要查询的地点，在下拉列表中选择'); ?>" value="" style="height:30px;width: 360px;">
                            <small style="color: #0073b7;"><?php echo $this->translate('选择地点后，拖动地图中的红色标识，确定具体位置。'); ?></small>
                        </div>
                        <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:360px;height:auto; display:none;"></div>

                        <div id="map-container"></div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    var map = new BMap.Map("map-container");
    var defaultPoint = new BMap.Point(116.465405, 39.898558);

    <?php if ($this->addressInfo && !empty($this->addressInfo->getAddressLat())) { ?>
    defaultPoint = new BMap.Point(<?php echo $this->addressInfo->getAddressLng() . ',' . $this->addressInfo->getAddressLat(); ?>);
    map.centerAndZoom(defaultPoint, 18);
    <?php } else { ?>
    map.centerAndZoom(defaultPoint, 10);
    <?php } ?>

    var marker = new BMap.Marker(defaultPoint, {
        enableDragging: true
    });
    map.addOverlay(marker);

    marker.addEventListener("dragend", function (e) {
        defaultPoint = e.point;
    });
    map.enableScrollWheelZoom(true);

    // 百度地图API功能
    function G(id) {
        return document.getElementById(id);
    }
    var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
        {
            "input" : "searchArea"
            ,"location" : map
        });
    ac.addEventListener("onhighlight", function(e) {  //鼠标放在下拉列表上的事件
        var str = "";
        var _value = e.fromitem.value;
        var value = "";
        if (e.fromitem.index > -1) {
            value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
        }
        str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;

        value = "";
        if (e.toitem.index > -1) {
            _value = e.toitem.value;
            value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
        }
        str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
        G("searchResultPanel").innerHTML = str;
    });

    var myValue;
    ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
        var _value = e.item.value;
        myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
        G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;

        setPlace();
    });
    function setPlace(){
        map.clearOverlays();    //清除地图上所有覆盖物
        function myFun(){
            var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
            map.centerAndZoom(pp, 18);
            var marker = new BMap.Marker(pp, {
                enableDragging: true
            });
            map.addOverlay(marker);    //添加标注
            defaultPoint = pp;

            marker.enableDragging();
            marker.addEventListener("dragend", function (e) {
                defaultPoint = e.point;
            });
        }
        var local = new BMap.LocalSearch(map, { //智能搜索
            onSearchComplete: myFun
        });
        local.search(myValue);
    }

    var myGeo = new BMap.Geocoder();
    //定义一个控件类
    function AddressControl() {
        this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
        this.defaultOffset = new BMap.Size(20, 20)
    }

    AddressControl.prototype = new BMap.Control();

    AddressControl.prototype.initialize = function(map) {
        //创建一个dom元素
        var div = document.createElement('div');
        //添加文字说明
        div.appendChild(document.createTextNode('点击使用当前地址'));
        // 设置样式
        div.style.cursor = "pointer";
        div.style.padding = "7px 10px";
        div.style.boxShadow = "0 2px 6px 0 rgba(27, 142, 236, 0.5)";
        div.style.borderRadius = "5px";
        div.style.color = "#fff";
        div.style.backgroundColor = "#00a65a";

        div.onclick = function(e){
            myGeo.getLocation(defaultPoint, function(result){
                if (result){
                    parent.$('#addressLng').val(defaultPoint.lng);
                    parent.$('#addressLat').val(defaultPoint.lat);
                    parent.$('#addressInfo').val(result.address);

                    parent.layer.close(parent.layer.getFrameIndex(window.name));
                }
            });
        }
        // 添加DOM元素到地图中
        map.getContainer().appendChild(div);
        // 将DOM元素返回
        return div;
    }
    //创建控件元素
    var myAddress = new AddressControl();
    //添加到地图中
    map.addControl(myAddress);
</script>
</body>